<template>
	<view class="comp-box" :style="{'padding-bottom': safeBottom + 'px'}">
		<view class="item-box" @click="changeType(0)">
			<image class="home-img" :src="type === 0 ? '/static/blockHome-s.png' : '/static/blockHome-n.png'"></image>
			<text class="item-text" :style="{'color': type === 0 ? '#222222' : '#999999'}">首页</text>
		</view>
		<view class="item-box" @click="changeType(1)">
			<image class="home-img" :src="type === 1 ? '/static/blockSocial-s.png' : '/static/blockSocial-n.png'"></image>
			<text class="item-text" :style="{'color': type === 1 ? '#222222' : '#999999'}">圈子</text>
		</view>
		<image class="release-img" src="/static/addBtn.png" @click="shwoRelease()"></image>
		<view class="item-box" @click="changeType(2)">
			<image class="home-img" :src="type === 2 ? '/static/blockMes-s.png' : '/static/blockMes-n.png'"></image>
			<text class="item-text" :style="{'color': type === 2 ? '#222222' : '#999999'}">消息</text>
		</view>
		<view class="item-box" @click="changeType(3)">
			<image class="home-img" :src="type === 3 ? '/static/blockMine-s.png' : '/static/blockMine-n.png'"></image>
			<text class="item-text" :style="{'color': type === 3 ? '#222222' : '#999999'}">我</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bottomBar",
		data() {
			return {
				type: 0,
				safeBottom: 0
			};
		},
		mounted() {
			this.safeBottom = this.$safeBottom;
		},
		methods: {
			changeType(type) {
				if (this.type !== type) {
					this.type = type;
					this.$parent.changeType(type);
				}
			},
			shwoRelease() {
				this.$parent.showRelease();
			}
		}
	}
</script>

<style lang="scss">
	.comp-box {
		width: 100vw;
		height: 100rpx;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		position: absolute;
		bottom: 0;
		
		.item-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.home-img {
				width: 44rpx;
				height: 42rpx;
			}
			
			.item-text {
				font-size: 19rpx;
				font-weight: 400;
				margin-top: 6rpx;
			}
		}
		
		.release-img {
			width: 120rpx;
			height: 92rpx;
		}
	}
</style>